<template>
    <div class="search-page">
        <h1>搜索结果</h1>
        <div class="search-info">
            搜索关键词: {{ $route.query.q }}
        </div>
        
        <div v-if="loading" class="loading">
            加载中...
        </div>
        
        <div v-else-if="results.length" class="search-results">
            <div v-for="result in results" :key="result.id" class="result-item">
                <h3>{{ result.title }}</h3>
                <p>{{ result.description }}</p>
                <NuxtLink :to="result.url" class="result-link">
                    查看详情
                </NuxtLink>
            </div>
        </div>
        
        <div v-else class="no-results">
            未找到相关结果
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: true,
            results: []
        }
    },
    
    async mounted() {
        const query = this.$route.query.q
        if (!query) return
        
        try {
            // 这里替换为实际的 API 调用
            const response = await fetch(`/api/search?q=${query}`)
            this.results = await response.json()
        } catch (error) {
            console.error('搜索失败:', error)
        } finally {
            this.loading = false
        }
    }
}
</script>

<style scoped>
.search-page {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.search-info {
    margin: 16px 0;
    color: #666;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.search-results {
    margin-top: 24px;
}

.result-item {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.result-item h3 {
    margin: 0 0 8px 0;
    color: #1976d2;
}

.result-item p {
    margin: 0 0 8px 0;
    color: #666;
}

.result-link {
    color: #1976d2;
    text-decoration: none;
}

.result-link:hover {
    text-decoration: underline;
}

.no-results {
    text-align: center;
    padding: 40px;
    color: #666;
}
</style> 